<template>
  <div class="main-content-box">
    <div id="topoDemo"></div>
  </div>
</template>

<script>
import G6 from '@antv/g6';
export default {
  name: 'g6demo1',
  data () {
    return {

    }
  },
  mounted () {
    this.getInit()
  },
  methods: {
    getInit () {
      fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
        .then(res => res.json())
        .then(data => {
          const width = document.getElementById('topoDemo').scrollWidth;
          const height = document.getElementById('topoDemo').scrollHeight || 500;
          const graph = new G6.TreeGraph({
            container: 'topoDemo',
            width,
            height,
            modes: {
              default: [
                {
                  type: 'collapse-expand',
                  onChange: function onChange (item, collapsed) {
                    const data = item.get('model').data;
                    console.log(item.get('model'))
                    data.collapsed = collapsed;
                    return true;
                  },
                },
                'drag-canvas',
                'zoom-canvas',
              ],
            },
            defaultNode: {
              size: 26,
              anchorPoints: [
                [0, 0.5],
                [1, 0.5],
              ],
              style: {
                fill: '#C6E5FF',
                stroke: '#5B8FF9',
              },
            },
            defaultEdge: {
              type: 'cubic-horizontal',
              style: {
                stroke: '#A3B1BF',
              },
            },
            layout: {
              type: 'mindmap',
              direction: 'H',
              getHeight: () => {
                return 16;
              },
              getWidth: () => {
                return 16;
              },
              getVGap: () => {
                return 10;
              },
              getHGap: () => {
                return 50;
              },
            },
          });

          let centerX = 0;
          /**
           * 设置各个节点样式及其他配置，以及在各个状态下节点的 KeyShape 的样式。
           * 此处用于配置 节点在中心节点的左右位置
           */
          graph.node(function (node) {
            if (node.id === 'Modeling Methods') {
              centerX = node.x;
            }

            return {
              label: node.id,
              labelCfg: {
                position:
                  node.children && node.children.length > 0
                    ? 'left'
                    : node.x > centerX
                      ? 'right'
                      : 'left',
                offset: 5,
              },
            };
          });

          graph.data(data);
          graph.render();
          graph.fitView();
        });
    }
  }


}

</script>

<style scoped>
</style>